<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SsChart',
  props: {
    echartsOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      myEcharts: null
    }
  },
  watch: {
    echartsOption() {
      this.updateChart()
    }
  },
  created() {},
  mounted() {
    const that = this
    this.init()
    // 屏幕缩放的时候，重绘echart
    window.addEventListener('resize', () => {
      if (that.myEcharts) {
        that.myEcharts.resize()
      }
    })
  },
  methods: {
    init() {
      const that = this
      if (!Array.isArray(this.echartsOption.series)) {
        return
      }
      let currentOption = null
      switch (this.type) {
        case 'line':
          currentOption = this.getLineOption()
          break
        case 'bar':
          currentOption = this.getBarOption()
          break
        case 'radar':
          currentOption = this.getRadarOption()
          break
        default:
          currentOption = this.echartsOption
      }

      this.myEcharts = echarts.init(this.$refs.echarts)
      this.myEcharts.setOption(currentOption)
      this.myEcharts.on('click', (event) => {
        that.$emit('click', {
          type: 'click',
          event
        })
      })
      that.myEcharts.getZr().on('click', (params) => {
        try {
          const pointInPixel = [params.offsetX, params.offsetY]
          if (that.myEcharts.containPixel('grid', pointInPixel)) {
            const xIndex = that.myEcharts.convertFromPixel({ seriesIndex: 0 }, [
              params.offsetX,
              params.offsetY
            ])[0]
            that.$emit('click', {
              type: 'click-xIndex',
              event: {
                xIndex,
                option: that.echartsOption
              }
            })
          }
        } catch (err) {
          console.log(err)
        }
      })
    },
    getLineOption() {
      this.echartsOption.series.forEach((item) => {
        item.type = 'line'
      })
      return Object.assign(
        {
          grid: {
            top: 40,
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: true
          },
          title: {
            text: ''
          },
          legend: {
            left: 100,
            right: 0,
            type: 'scroll'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: []
        },
        this.echartsOption
      )
    },
    getBarOption() {
      this.echartsOption.series.forEach((item) => {
        item.type = 'bar'
      })
      return {
        grid: {
          top: 40,
          right: 0,
          bottom: 0,
          left: 0,
          containLabel: true
        },
        title: {
          text: this.echartsOption.title.text
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.echartsOption.xAxis[0].data
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.echartsOption.series
      }
    },
    getRadarOption() {
      this.echartsOption.series.forEach((item) => {
        item.type = 'radar'
        item.data.forEach((child) => {
          child.areaStyle = {
            opacity: 0.5
          }
        })
      })
      return {
        title: {
          text: this.echartsOption.title.text
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          radius: '50%',
          indicator: this.echartsOption.radar.indicator
        },
        series: this.echartsOption.series
      }
    },
    destroyChart() {
      if (!this.myEcharts) {
        return
      }
      this.myEcharts.dispose()
      this.myEcharts = null
    },
    updateChart() {
      this.destroyChart()
      this.init()
    }
  }
}
</script>
